import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { CalendarService } from './calendar.service';

import * as moment from 'moment';
import * as _ from 'lodash'

@Component({
	selector: 'app-calendar',
	templateUrl: './calendar.component.html',
	styleUrls: ['./calendar.component.scss'],
	providers: [CalendarService]
})
export class CalendarComponent implements OnInit {

	public calendarList = [];

	public listCount = 20;

	public type = 0;

	constructor(
		private calendarCalendarService: CalendarService,
		public router: Router,
		private route: ActivatedRoute,
	) { }

	createCalendar(){
		window['$']("#calendar-modal").modal();
	}

	ngOnInit() {


		window['$'](function() {

			/* initialize the external events
			 -----------------------------------------------------------------*/
			function ini_events(ele) {
				ele.each(function() {

					// create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/)
					// it doesn't need to have a start or end
					var eventObject = {
						title: window['$'].trim(window['$'](this).text()) // use the element's text as the event title
					};

					// store the Event Object in the DOM element so we can get to it later
					window['$'](this).data('eventObject', eventObject);

					// make the event draggable using jQuery UI
					window['$'](this).draggable({
						zIndex: 1070,
						revert: true, // will cause the event to go back to its
						revertDuration: 0  //  original position after the drag
					});

				});
			}

			ini_events(window['$']('#external-events div.external-event'));

			/* initialize the calendar
			 -----------------------------------------------------------------*/
			//Date for the calendar events (dummy data)
			var date = new Date();
			var d = date.getDate(),
				m = date.getMonth(),
				y = date.getFullYear();
			window['$']('#calendar').fullCalendar({
				header: {
					left: 'prev,next today',
					center: 'title',
					right: 'month,agendaWeek,agendaDay'
				},
				buttonText: {
					today: '今天',
					month: '月',
					week: '周',
					day: '日'
				},
				//Random default events
				events: [
					{
						title: '2',
						start: new Date(y, m, 1),
						backgroundColor: "#f56954", //red
						borderColor: "#f56954" //red
					}
					,
					{
						title: '1',
						start: new Date(y, m, 1),
						backgroundColor: "#f56954", //red
						borderColor: "#f56954" //red
					},
					{
						title: ' 6',
						start: new Date(y, m, d - 5),
						backgroundColor: "#f39c12", //yellow
						borderColor: "#f39c12" //yellow
					}, {
						title: ' 3',
						start: new Date(y, m, d + 9),
						backgroundColor: "#f39c12", //yellow
						borderColor: "#f39c12" //yellow
					}, {
						title: '2',
						start: new Date(y, m, d + 13),
						backgroundColor: "#f39c12", //yellow
						borderColor: "#f39c12" //yellow
					},
					{
						title: '1',
						start: new Date(y, m, d + 20, 10, 30),
						allDay: false,
						backgroundColor: "#0073b7", //Blue
						borderColor: "#0073b7" //Blue
					},
					{
						title: '3',
						start: new Date(y, m, d + 17, 10, 30),
						allDay: false,
						backgroundColor: "#0073b7", //Blue
						borderColor: "#0073b7" //Blue
					},
					{
						title: '2',
						start: new Date(y, m, d + 18, 12, 0),
						end: new Date(y, m, d, 14, 0),
						allDay: false,
						backgroundColor: "#00c0ef", //Info (aqua)
						borderColor: "#00c0ef" //Info (aqua)
					},
					{
						title: '1',
						start: new Date(y, m, d + 1, 19, 0),
						end: new Date(y, m, d + 1, 22, 30),
						allDay: false,
						backgroundColor: "#00a65a", //Success (green)
						borderColor: "#00a65a" //Success (green)
					},
					{
						title: '1',
						start: new Date(y, m, 28),
						end: new Date(y, m, 29),
						backgroundColor: "rgb(30,185,225)", //Primary (light-blue)
						borderColor: "rgb(30,185,225)" //Primary (light-blue)
					}
				],
				editable: true,
				droppable: true, // this allows things to be dropped onto the calendar !!!
				drop: function(date, allDay) { // this function is called when something is dropped

					// retrieve the dropped element's stored Event Object
					var originalEventObject = window['$'](this).data('eventObject');

					// we need to copy it, so that multiple events don't have a reference to the same object
					var copiedEventObject = window['$'].extend({}, originalEventObject);

					// assign it the date that was reported
					copiedEventObject.start = date;
					copiedEventObject.allDay = allDay;
					copiedEventObject.backgroundColor = window['$'](this).css("background-color");
					copiedEventObject.borderColor = window['$'](this).css("border-color");

					// render the event on the calendar
					// the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
					window['$']('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

					// is the "remove after drop" checkbox checked?
					if (window['$']('#drop-remove').is(':checked')) {
						// if so, remove the element from the "Draggable Events" list
						window['$'](this).remove();
					}

				}
			});

			/* ADDING EVENTS */
			var currColor = "rgb(30,185,225)"; //Red by default
			//Color chooser button
			var colorChooser = window['$']("#color-chooser-btn");
			window['$']("#color-chooser > li > a").click(function(e) {
				e.preventDefault();
				//Save color
				currColor = window['$'](this).css("color");
				//Add color effect to button
				window['$']('#add-new-event').css({ "background-color": currColor, "border-color": currColor });
			});
			window['$']("#add-new-event").click(function(e) {
				e.preventDefault();
				//Get value and make sure it is not null
				var val = window['$']("#new-event").val();
				if (val.length == 0) {
					return;
				}

				//Create events
				var event = window['$']("<div />");
				event.css({ "background-color": currColor, "border-color": currColor, "color": "#fff" }).addClass("external-event");
				event.html(val);
				window['$']('#external-events').prepend(event);

				//Add draggable funtionality
				ini_events(event);

				//Remove event from text input
				window['$']("#new-event").val("");
			});
		});

	}

}
